<template>
  <div>

      <!--  内层嵌套分配代理人 -->
      <el-dialog title="分配代理人"  :visible.sync="dialogFormVisible" append-to-body center>
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="选择代理人" prop="name">
            <el-autocomplete
              v-model="form.name"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              placeholder="选择代理人"
              @select="handleSelect"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
              </template>
            </el-autocomplete>
            <!-- <el-input v-model="form.taitou" autocomplete="off" placeholder="请输入发票抬头，必填项"></el-input> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose" v-no-more-click:3000>取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" v-no-more-click:3000>确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  created() {},
  methods: {
    //打开弹窗
    showDialog(id) {
      this.order = id;
      this.dialogFormVisible = true;
      this.getAllAgent();
    },

    //获取所有代理人信息
    getAllAgent() {
      getAgent(this.$axios)
        .then(res => {
          if (res.data.code == 200) {
            this.restaurants = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });
    },

    //输入抬头模糊匹配
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = [];
      if (restaurants.length > 0) {
        for (const i in restaurants) {
          restaurants[i].value = restaurants[i].name;
        }
        results = results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
      }
      cb(results);
    },
    //匹配
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
        );
      };
    },
    //模糊匹配赋值
    handleSelect(item) {
      this.form = item;
      this.$refs["ruleForm"].clearValidate();
    },

    //提交数据
    submitForm(formName) {
    },

    //关闭弹窗
    handleClose() {
      this.dialogFormVisible = false;
      this.resetForm("ruleForm");
    },
    //重置验证
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style>
</style>
